<template>
  <div :class="['asr-animation-mobile-container']">
    <div :class="['text', isCancel ? 'text-error' : '']">
      松开发送，上滑取消
    </div>
    <div
      :class="[
        'voiceing-container',
        isCancel ? 'voiceing-container-error' : '',
      ]"
      ref="voiceingContainerRef"
    >
      <!-- <img class="image" src="@/assets/img/voiceing.gif" alt="ASR Animation"> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "asr-animation",
  props: {},
  data() {
    return {
      isCancel: false,
    };
  },
  mounted() {
    this.addListeners();
  },
  beforeDestroy() {
    this.removeListeners();
  },
  methods: {
    addListeners() {
      document.addEventListener("touchmove", this.handleMove, {
        passive: false,
      });
      document.addEventListener("mousemove", this.handleMove);
      document.addEventListener("touchend", this.handleEnd);
      document.addEventListener("mouseup", this.handleEnd);
    },
    removeListeners() {
      document.removeEventListener("touchmove", this.handleMove);
      document.removeEventListener("mousemove", this.handleMove);
      document.removeEventListener("touchend", this.handleEnd);
      document.removeEventListener("mouseup", this.handleEnd);
    },
    handleMove(event) {
      const voiceingContainer = this.$refs.voiceingContainerRef;
      if (!voiceingContainer) {
        return;
      }

      const rect = voiceingContainer.getBoundingClientRect();
      let clientY;

      if (event.touches && event.touches.length > 0) {
        clientY = event.touches[0].clientY;
      } else if (event.clientX !== undefined && event.clientY !== undefined) {
        // Mouse event
        clientY = event.clientY;
      } else {
        return; // No coordinate data
      }

      // 检查鼠标是否在voiceingContainer上方
      if (clientY < rect.top) {
        this.isCancel = true;
      } else {
        this.isCancel = false;
      }
    },
    handleEnd(event) {
      if (this.isCancel) {
        this.$emit("cancel");
        console.log("Action: Cancelled due to upward swipe and release");
      } else {
        const { height } =
          this.$refs.voiceingContainerRef.getBoundingClientRect();
        // 确保当前是展示的状态
        if (height > 0) {
          this.$emit("send");
          console.log("Action: Send");
        }
      }
      // Reset state after action
      this.isCancel = false;
    },
  },
};
</script>

<style lang="less" scoped>
.asr-animation-mobile-container {
  position: relative;
  .text {
    position: absolute;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--colorte-xt-caption);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    z-index: 1;
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    background: linear-gradient(
      180deg,
      /* 从上到下 */ rgba(255, 255, 255, 0) 0%,
      /* 顶部：完全透明的白色 */ rgba(255, 255, 255, 0.7) 50%,
      /* 中间：70% 不透明度的白色 */ rgba(255, 255, 255, 1) 100%
        /* 底部：完全不透明的白色 */
    );
  }
  .text-error {
    color: var(--color-error-normal);
  }
  .voiceing-container {
    background-color: white;
    display: flex;
    height: 82px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: var(--radius-large);
    border: 1px solid #3e71ff;
    margin: 8px 12px;
    .image {
      width: 260px;
      height: 44.688px;
      aspect-ratio: 260/44.69;
    }
  }
  .voiceing-container-error {
    border: 1px solid var(--color-error-normal);
  }
}
</style>
